<template>
  <div style="width: 100%;height: 800px;background-color: rgba(217,217,134,0.13)">
    <div style="width:1200px;height:800px;margin: 0 auto;background-color:white">

      <div style="width:600px;height: 600px;margin: 0 auto;">
        <h2>账号注册</h2>
        <div style="width:600px;height: 100px;margin-bottom: 25px">
          <div style="width: 100px;height: 100px;float: left;line-height: 100px;">
            <el-button type="primary" icon="el-icon-camera-solid" circle></el-button>
          </div>
          <div style="width: 100px;height: 100px;margin-left: 100px; ">
            <el-upload
              class="avatar-uploader"
              action="/api/user/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <el-form :model="user" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名"  prop="username">
            <el-input type="text" v-model="user.username" autocomplete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码 " prop="password">
            <el-input type="password" v-model="user.password" ></el-input>
          </el-form-item>
          <el-form-item label="电话 " prop="tel">
            <el-input type="text" v-model="user.tel" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="邮箱 " prop="email">
            <el-input type="email" v-model="user.email" placeholder="请输入邮箱账号"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker v-model="user.birthday "type="datetime" placeholder="选择日期时间" style="float: left;width:500px" > </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(user)">注册</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      </div>
  </div>
</template>

<script>

  import axios from 'axios';

  export default {
        name: "regis",
        data(){
          return{
            user: {
              username:'',
              password:'',
              tel:'',
              email:'',
              birthday:'',
              photo:'',
            },
            value1: '',
            imageUrl:''
          };
        },
      methods: {
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.user.photo=res;
        },
        submitForm:function (user) {
            var _this=this;
            axios.post("/api/user/insert/",_this.user).then(function (res) {
                if(res.data=="success"){
                  _this.$router.push('/login')
                }else{
                  _this.$notify({
                    title: '警告',
                    message: '注册失败',
                    type: 'warning'
                  });
                }
            })
        }
      }
    }
</script>

<!--<style scoped>

</style>-->
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
